<template>
  <div class="r">
    <div class="t">
      <el-image
        style="width: 64px; height: 64px; border-radius: 20px"
        :src="require('@/assets/second/people.png')"
      />
      <div
        style="display: flex; flex-direction: column; margin-left: 8px"
      >
        <span style="font-size: 12px; margin: -8px 0 10px">雷达捕捉人数：</span>
        <span class="ss">{{ personCount }}</span>
      </div>
    </div>
    <div class="b">
      <div>
        设备编码：<span class="mm">{{ deviceInfo.deviceCode }}</span>
      </div>
      <div>
        设备位置：<span class="mm">{{ deviceInfo.installAdress }}</span>
      </div>
      <div style="display: flex; align-items: center">
        设备状态：
        <span
          v-if="deviceInfo.status !== ''"
          class="point"
          :style="{
                    backgroundColor:
                      deviceInfo.status == 1 ? '#2BD144' : '#FF4953',
                  }"
        ></span
        ><span v-if="deviceInfo.status !== ''" class="mm">{{
          deviceInfo.status == 1 ? "正常" : "异常"
        }}</span>
      </div>
    </div>
    <div class="c">
      <div>雷达位置示意图</div>
      <img class="cimg" :src=sketch alt="">
    </div>
  </div>
</template>

<script>
import empty from '@/assets/radar/empty.png'
export default {
  name: "radar-info",
  description: "当前雷达设备信息",
  props: {
    personCount:{
      type: Number,
      default: () => 0
    },
    deviceInfo:{
      type: Object,
      default:() => {

      }
    },
    sketch:{
      type: String,
      default:() => empty
    }
  },
  data(){
    return {
      empty
    }
  }
}
</script>

<style lang="less" scoped>
.r {
  box-sizing: content-box;
  font-family: "HarmonyOS Sans SC";
  font-style: normal;
  margin-left: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-weight: 400;
  font-size: 14px;
  overflow: hidden;
  .t {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 20px 12px;
    //padding-left: 15px;
    color: #666666;
    height: 14%;
    background: #f5f8fe;
    //margin-bottom: 10px;
    border-radius: 2px;
  }
  .b {
    //margin-bottom: 10px;
    padding: 20px;
    padding-top: 20px;
    color: #666666;
    height: 24%;
    background: #f5f8fe;
    border-radius: 2px;

    div {
      margin-bottom: 20px;
    }
  }
  .c{
    //flex: 1;
    //margin-top: 10px;
    padding: 20px 20px 10px;
    color: #666666;
    //height: 38%;
    background: #f5f8fe;
    border-radius: 2px;
    .cimg{
      padding-top: 10px;
      width: 100%;
    }
  }
}
.ss {
  font-weight: 700;
  font-size: 18px;
  color: #333333;
}
.mm {
  font-weight: 400;
  font-size: 14px;
  color: #333333;
}
.point {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 5px;
}
</style>
